<template>
  <div class="search-bar">
    <div class="search-tab">
      <div v-for="(item,index) in levels"
           :key="index"
           class="search-tab-item"
           :class="activeIndex===index?'active':''"
           @click="activeIndex=index">{{item}}
      </div>
    </div>
    <div v-if="!keyword"
         class="search-input-cover">
      <span class="search-tag">搜索题目</span>
    </div>
    <input type="text"
           class="search-input"
           v-model="keyword"
           @keyup.enter="searchProblems" />
    <div class="search-icon"
         @click="searchProblems">
      <i class="iconfont">&#xe783;</i>
    </div>
  </div>
</template>

<script>
import { getProblems } from '@/api/problem'

export default {
  data () {
    return {
      keyword: '',
      activeIndex: 0,
      levels: ['全部', '简单', '中等', '困难']
    }
  },
  mounted () {
    this.searchProblems()
  },
  methods: {
    searchProblems () {
      const level = this.activeIndex > 0 ? this.activeIndex - 1 : ''
      this.$emit('loading', true)
      getProblems(level, this.keyword)
        .then(res => {
          this.$emit('problems', res.data)
          this.$emit('loading', false)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.search-bar
  position relative
  .search-tab
    position absolute
    top -22px
    left 30px
    display flex
    flex-direction row
    &:hover~.search-input
      border-color transparent
    .search-tab-item
      margin-right 4px
      min-width 40px
      height 22px
      line-height 22px
      color #666
      text-align center
      border-bottom none
      border 1px solid #fff
      border-bottom none
      border-radius 4px 4px 0 0
      cursor pointer
      transition border 0.4s, background 0.4s
      box-sizing border-box
      // 渐变色边框
      background-image linear-gradient(180deg, #fff, #fff), linear-gradient(to right, #abecd6, #fbed96)
      // 将背景颜色定位到内边距和边框
      background-origin padding-box, border-box
      background-clip padding-box, border-box
    .active
      border-color transparent
  .search-input-cover
    pointer-events none
    position absolute
    padding-top 15px
    width 100%
    height 100%
    text-align center
    box-sizing border-box
    .search-tag
      color color-light-gray
      cursor default
  .search-input
    padding 0 2em
    width 100%
    height 50px
    line-height 50px
    color #666
    font-size 18px
    border 1px solid color-light-gray
    border-radius 40px
    box-sizing border-box
    // 渐变色边框
    background-image linear-gradient(180deg, #fff, #fff), linear-gradient(to right, #abecd6, #fbed96)
    // 将背景颜色定位到内边距和边框
    background-origin padding-box, border-box
    background-clip padding-box, border-box
    transition border 0.4s ease-in-out
    &:hover, &:focus
      border-color transparent
    &:focus+.search-input-cover
      display none
  .search-icon
    position absolute
    top 5px
    right 5px
    width 40px
    height 40px
    line-height 40px
    text-align center
    background-image linear-gradient(to right bottom, #abecd6, #fbed96)
    border-radius 50%
    cursor pointer
    .iconfont
      font-size 22px
      color #fff
</style>
